<template>
  <div>
    <div id="head">
      <van-icon size="25px" @click="toHead()" name="arrow-left"
                style="position: absolute;left: 10px;" />
      系统设置
    </div>
    <div>
      <van-cell class="custom-cell" title="关于我们" is-link />
      <van-cell class="custom-cell" title="清除缓存" :value="cache" is-link @click="clearUp()"/>
    </div>

    <div style="padding: 10px;margin-top: 40px">
      <van-button type="info" round size="large" @click="unLogin">退出登录</van-button>
    </div>
  </div>
</template>

<script>
import { Dialog } from 'vant';
export default {
  data(){
    return{
      cache:"1.5M"
    }
  },
  methods:{
    unLogin(){
      localStorage.removeItem("aa");
      this.$router.push('/login')
    },
    clearUp(){
      Dialog.confirm({
        title: '清除缓存',
        message: '确认清除缓存吗？',
      })
       .then(() => {
            this.cache = "0KB"
        })
       .catch(() => {
            // on cancel
        });
    },
    toHead(){
      this.$router.push('/my')
    }
  },
  created(){

  }
}
</script>

<style scoped>
#head{
  background-color: #f5f5f5;
  height: 30px;
  width: 100%;
  padding-top: 10px;
  padding-bottom: 10px;
  text-align: center;
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 10px;
}
.custom-cell .van-cell__title {
  text-align: left;
  ::v-deep .van-icon {
    display: flex;
    align-items: center;
  }
}
</style>
